Created a new form element to use a slider control, using the s/p ajax module + scriptaculous library. Works beautifully, however I'm not getting a return value back that is storable. Anyone who has created a new form element able to shed some light on this for me?

/**
* Custom form element to do an ajax slider
*/

function testimonials_elements() {
  $vals = array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20);
  $options1 = array(
	'#range' => '$R(0,20)',
	'#minimum' => 0, 
	'#maximum' => 20, 
	'#increment' => 1, 
	'#values' => $vals,
    '#onSlide' => "function(v){\$('debug1').innerHTML='slide: '+v; $('barreSortie4').style.width=(v*3)+'px';}",
    '#onChange' => "function(v){\$('debug1').innerHTML='changed! '+v}",
 	);
	
  $type['sliderA'] = array('#input' => TRUE, '#process' => spajax_slider('handle1', 'track1', $options1));  
  return $type;
}

function theme_sliderA($element) {
  //see CSS for style defs for track1, handle1, debug1
  $output = '<h4>'.$element['#title'].'</h4>';
  $output .= '<div id="track1"><div id="handle1"></div> </div>';
  $output .= '<p id="debug1"> </p>';
  return $output;
}

... in hook_form()

  //slider control for form
  $form['review']['satisfaction'] = array(
    '#type' => 'sliderA',
    '#title' => t('Overall satisfaction with your results'), 
	'#default_value' => $node->satisfaction, 
  );

Comments

nedjo’s picture

There's no immediate sign of a form element (input, textarea, select, etc.) in your code. Presumably you'll need one if you're using standard form submit to pass data.

greg@beargroup.com’s picture

Was trying to merge the ideas used here: http://drupal.org/node/61492 , with the image_button form posts, and the spajax instructions to define a reusable form element for a slider bar. It's type is called 'sliderA', has input =>TRUE defined for it. Saw similar defs for radio buttons in system.module, that seemed like the closest to mirror.

Could be the form element is fine (it looks and works right), and I'm just not getting the data back from spajax properly...

Thanks,
-Greg

greg@beargroup.com’s picture

Sorry, left this off - but you need the CSS for track1 & handle1 defined also... here were mine.

/*
* AJAX Slider Element
*/
#track1 {
	width: 300px;
	background-color: #B1D1C7;
	height: 10px;
}

#handle1 {
	width: 10px;
	height: 20px;
	background-color:#3B3B3B;
	cursor:pointer;
}